import { Box, Button } from "@mui/material";
import { Shares } from "../components/Shares";
import { Bill } from "../components/Bill";
import { endSession, getSession } from "../session";
import { useGetPortfolioQuery } from "../api/invest";
import { Loader } from "../components/UI/loader";

export const MainPage = () => {
  const { data, isError, isLoading } = useGetPortfolioQuery(
    getSession().portfolioId
  );

  return (
    <Box sx={{ width: "40%", margin: "0 auto" }}>
      <h1 className="main__title">Ваш портфель: </h1>
      <Button
        variant="outlined"
        color="error"
        onClick={() => {
          endSession();
          location.reload();
        }}
        sx={{ position: "fixed", top: 0, right: 0, marginTop: "30px", marginRight: "30px"}}
      >
        Выйти
      </Button>
      {data ? (
        <>
          <Bill
            totalAmount={data.totalAmountPortfolio.units}
            expected={data.expectedYield.units}
          />
          <Shares positions={data.positions} />
        </>
      ) : (
        <div style={{ textAlign: "center" }}>
          <Loader width={"200px"} height={"200px"} />
        </div>
      )}
    </Box>
  );
};
